<template>
  <el-card class="account-container">
    <div style="line-height: 100px">
      <el-descriptions
              title="商家资料"
              direction="vertical"
              :column="2"
              :size="size"
              border
      >
        <el-descriptions-item label="店铺名称" >{{shopName}}</el-descriptions-item>
        <el-descriptions-item label="店铺电话">{{shopTelephone}}</el-descriptions-item>
        <el-descriptions-item label="店主" >{{sellerName}}</el-descriptions-item>
        <el-descriptions-item label="店主电话" >{{sellerTelephone}}</el-descriptions-item>
        <el-descriptions-item label="店铺状态" >
          <el-tag size="large" type="success" v-if="Status==2" @click="changeStatus(1)">正在营业</el-tag>
          <el-tag size="large" v-else type="info" @click="changeStatus(2)">打烊中</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="店铺地址">
          {{provinceName}}
          {{cityName}}
          {{districtName}}
          {{detail}}
        </el-descriptions-item>
        <el-description-item label="店主">{{sellerName}}}</el-description-item>
        <el-descriptions-item label="店铺介绍">{{description}}</el-descriptions-item>
        <el-descriptions-item label="起送费">
          <div class="bottom">
            <el-text   v-if="dropFeeInputShow==false">{{dropOffFee}}元</el-text>
            <el-input style="width: 80px" v-model="inputFee"  v-show="dropFeeInputShow"/>
            <el-button text class="button" v-if="dropFeeInputShow==false" @click="showInput">修改</el-button>
            <el-button text class="button" v-else @click="changeDropFee">确定修改</el-button>
          </div>
        </el-descriptions-item>


        <template #extra>
          <el-button type="primary" @click="modifyData">修改资料</el-button>
        </template>
      </el-descriptions>

    </div>


  </el-card>

</template>

<script setup>
  import {useStore} from 'vuex'
  import {ref} from 'vue'
  import {useRouter} from 'vue-router'
  const router=useRouter()
  import axios from 'axios';
  import {ElMessage} from "element-plus";
  import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
  } from '@element-plus/icons-vue'
  const store=useStore()
  var sellerName=ref()
  var sellerTelephone=ref()
  var shopName=ref()
  var shopTelephone=ref()
  var description=ref()
  var provinceName=ref()
  var cityName=ref()
  var districtName=ref()
  var detail=ref()
  var Status=ref()/*store.getters.getStatus?"营业中":"打烊中"*/
  var dropOffFee=ref(0)
  var inputFee=ref()
  var dropFeeInputShow=ref(false)
  const getMessage=()=>{
    const id=store.getters.getId
    axios.get('/api/merchant/get',{
      params:{
        userId:id
      }
    })
            .then(response => {
              // 请求成功处理

              let res=response.data.data;
              sellerName.value=res.sellerName
              sellerTelephone.value=res.sellerTelephone
              shopName.value=res.shopName
              shopTelephone.value=res.shopTelephone
              description.value=res.description
              provinceName.value=res.provinceName
              cityName.value=res.cityName
              districtName.value=res.districtName
              detail.value=res.detail
              Status.value=res.status
              dropOffFee=res.dropOffFee
              console.log(res)
            })
            .catch(error => {
              // 请求失败处理
              console.error(error);
            });
  }
  const modifyData=()=>{
    router.push({path:"/modify"})
  }
  const changeStatus=(status1)=>{

    axios.get("api/merchant/changeShopStatus",{
      params:{
        st:status1
      }
    }).then(res=>{
      location.reload();
      ElMessage.success("更改成功");

    })
  }
  const showInput=()=>{
    dropFeeInputShow.value=true;
  }
  const changeDropFee=()=>{
    console.log(inputFee.value)
    dropOffFee=inputFee.value
    axios.get("api/merchant/changeDropFee",{
      params:{
        dropFee:dropOffFee
      }
    }).then(
            res=>{
              console.log(res.data)
              ElMessage.success("修改成功")
              dropFeeInputShow.value=false
            }
    )
  }
  getMessage();

</script>
<style scoped>
  .course {
    font-weight: bold;
    display: inline-block;
  }
  .course li {
    line-height: 36px;
    color: #409eff;
    cursor: pointer;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
